<template>
    <el-dialog
        title="导入表数据"
        top="4vh"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
        <div class="main">
            <div class="left-p">
                <el-tree
                    ref="tree"
                    :data="treeData"
                    check-strictly
                    :props="defaultProps"
                    node-key="id"
                    show-checkbox
                    @check="handleNodeClick"
                ></el-tree>
            </div>
             <div class="right-f">
                <el-upload
                    class="upload-demo"
                    drag
                    accept=".xls,.xlsx"
                    :on-success="handerSuccess"
                    :file-list="fileList"
                    :action="action"
                    >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
                    </el-upload>
             </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>    
</template>
<script>
import { loadTreeRootML, fileUrl, perform } from "../serve/api";
    export default {
        data() {
            return {
                dialogVisible: false,
                treeData: [],
                fileList: [],
                defaultProps: {
                    children: "children",
                    label: "title",
                },
                action:fileUrl,
                currentNodeKey: {},
                transactionId: '',
            }
        },
        mounted() {
            this.getTreeData();
        },
        methods: {
            show() {
                this.dialogVisible= true;
                
            },
            getTreeData() {
                loadTreeRootML({ async: false, pcode: "", title: "" }).then((res) => {
                    console.log(res, 'res');
                    this.treeData = res.data
                });
            },
            handleNodeClick(data) {
               if (this.currentNodeKey?.title && this.$refs.tree) {
                    this.$refs.tree.setCheckedKeys([])
                    this.$refs.tree.setCheckedNodes([data])
               }
               this.currentNodeKey = data
            },
            handleClose() {
                this.dialogVisible = false
                this.fileList = []
                this.currentNodeKey = []
                this.$refs.tree.setCheckedKeys([])
            },
            handerSuccess(res) {
                this.transactionId = res
            },
            save() {
                if (!this.currentNodeKey?.key) {
                    this.$message.error('请选择目录')
                    return
                }
                if (!this.transactionId) {
                    this.$message.error('请上传文件')
                    return
                }
                perform({
                    transactionId:this.transactionId,
                    categoryId: this.currentNodeKey.key,
                })
                .then((res) => {
                    console.log(res);
                    this.$message({
                        message: "保存成功",
                        type: "success",
                    });
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .main {
        display: flex;
        .left-p {
            width: 300px;
        }
        .right-f{
            flex: 1;
            /deep/.el-upload {
                width: 100%;
            }
            /deep/.el-upload-dragger {
                width: 100%;
            }
        }
    }
</style>